<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js + axios + api</title>
  <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    @charset "utf-8";
    /* CSS Document */
    .tabtop13 {
        margin-top: 13px;
    }
    .tabtop13 td{
        background-color:#ffffff;
        height:25px;
        line-height:150%;
    }
    .font-center{ text-align:center}
    .btbg{background:#e9faff !important;}
    .btbg1{background:#f2fbfe !important;}
    .btbg2{background:#f3f3f3 !important;}
    .biaoti{
        font-family: 微软雅黑;
        font-size: 26px;
        font-weight: bold;
        border-bottom:1px dashed #CCCCCC;
        color: #255e95;
    }
    .titfont {

        font-family: 微软雅黑;
        font-size: 16px;
        font-weight: bold;
        color: #255e95;
        background: url(../images/ico3.gif) no-repeat 15px center;
        background-color:#e9faff;
    }
    .tabtxt2 {
        font-family: 微软雅黑;
        font-size: 14px;
        font-weight: bold;
        text-align: right;
        padding-right: 10px;
        color:#327cd1;
    }
    .tabtxt3 {
        font-family: 微软雅黑;
        font-size: 14px;
        padding-left: 15px;
        color: #000;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 20px;
    }
</style>
<body>
<h1>显示列表</h1>
<div id="vue_user">
    {{info}}
    <table   border="1">
        <tr>
            <td  class="btbg font-center titfont" >用户名</td>
            <td  class="btbg font-center titfont" >密码</td>
            <td  class="btbg font-center titfont" >数据链接</td>
            <td  class="btbg font-center titfont" >备用链接</td>
        </tr>
        <tr v-for="u in info">
            <td  class="btbg2">{{u.username}}</td>
            <td  class="btbg2">{{u.password}}</td>
            <td  class="btbg2">{{u._links.self.href}}</td>
            <td  class="btbg2">{{u._links.customer.href}}</td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_user',
        data: {

        },
        methods: {
        },
        data () {
            return {
              info: null
            }
        },
        mounted () {
              axios
                .get('http://localhost:7006/customers')
                .then(response => (this.info = response.data._embedded.customers))
                .catch(function (error) { // 请求失败处理
                  console.log(error);
                  });
              }
        })

</script>
</body>
</html>